window.onload = function() {
    // 监听页面滚动
    const nav = document.querySelector('#nav');
    const navText = document.querySelector('.nav-text');
    const BackTop = document.querySelector('.BackTop');
    window.addEventListener('scroll', function() {
        let documentTop = document.documentElement.scrollTop;
        // console.log(documentTop);
        if (documentTop > 10) {
            nav.style.backgroundColor = '#e43956c4';
            navText.style.color = '#fff'
        } else {
            nav.style.backgroundColor = '';
            navText.style.color = ''
        };
    });

    // 监听屏幕宽度变化
    const link = document.querySelector('.links')
    const linksActive = document.querySelector('.links-active');
    window.onresize = function() {
        // let offsetWid = document.documentElement.clientWidth;
        if (window.innerWidth <= 1040) {
            link.style.display = 'none';
            menu.style.transform = 'scale(1)'
        } else {
            link.style.display = 'block';
            menu.style.transform = 'scale(0)';
            linksActive.style.right = '-250px';
        }
        // console.log(window.innerWidth);
    }

    // 点击小屏幕下的菜单按钮
    const menu = document.querySelector('.hamburger-menu');
    const line1 = menu.querySelector('#line1');
    const line2 = menu.querySelector('#line2');
    const line3 = menu.querySelector('#line3');
    var flag = 0;
    menu.addEventListener('click', function() {
        if (flag == 0) {
            line1.className = 'line1';
            line2.className = 'line2';
            line3.className = 'line3';
            linksActive.style.right = '0'
            flag = 1;
        } else {
            line1.className = 'line1-b';
            line2.className = 'line2-b';
            line3.className = 'line3-b';
            linksActive.style.right = '-250px'
            flag = 0;
        }

    })

    // 打字效果
    ityped.init('#ityped', {
        strings: ['前端工程师', 'coder'],
        startDelay: 600,
        loop: true
    });

    // console.log(Array.prototype);
    // console.log(String.prototype);

    // 返回顶部
    document.addEventListener('scroll', function() {
        // 返回顶部
        if (window.pageYOffset > 800) {
            BackTop.style.display = 'block';
        } else {
            BackTop.style.display = 'none'
        }
    });
    BackTop.onclick = function() {
        animate(window, 0)
    };
    // 导航栏返回
    // home
    const home = document.querySelector('.home');
    home.onclick = function() {
        animate(window, 0);
    };
    // 宽屏
    // about
    const About = document.querySelector('#about');
    const about = document.querySelector('.about');
    about.addEventListener('click', function() {
        animate(window, About.offsetTop - 52);
    });


    // skills
    const Skills = document.querySelector('#skills');
    const skills = document.querySelector('.skills');
    skills.onclick = function() {
        animate(window, Skills.offsetTop - 52)
    };

    // projects
    const Projects = document.querySelector('#projects');
    const projects = document.querySelector('.projects');
    projects.onclick = function() {
        animate(window, Projects.offsetTop - 52)
    };
    // resume
    // const Resume = document.querySelector('#resume');
    // const resume = document.querySelector('.resume');
    // resume.onclick = function() {
    //     animate(window, Resume.offsetTop - 1200)
    //     console.log(Resume.offsetTop);

    // };

    // 窄屏
    const home1 = document.querySelector('.home1');
    home1.addEventListener('click', function() {
        animate(window, 0);
    });
    const about1 = document.querySelector('.about1');
    about1.addEventListener('click', function() {
        animate(window, About.offsetTop - 52);
    });
    const skills1 = document.querySelector('.skills1');
    skills1.onclick = function() {
        animate(window, Skills.offsetTop - 52)
    };
    const projects1 = document.querySelector('.projects1');
    projects1.onclick = function() {
        animate(window, Projects.offsetTop - 52)
    };
    // const resume1 = document.querySelector('.resume1');
    // resume1.onclick = function() {
    //     animate(window, 5244)
    //     console.log(Resume.offsetTop);
    // };

    const aboutBtn = document.querySelector('.about-btn');
    aboutBtn.addEventListener('click', function() {
        console.log(1);
        animate(window, About.offsetTop - 52);
    });

    const projectsBtn = document.querySelector('.projects-btn');
    projectsBtn.addEventListener('click', function() {
        animate(window, Projects.offsetTop - 52);
    });
    // 打开弹出框
    const callBtn = document.querySelector('.callBtn');
    const callMe = document.querySelector('.call-me');
    callBtn.addEventListener('click', function() {
        callMe.style.zIndex = '10000'
    });
    // 弹出框关闭按钮
    const closeBbtn = document.querySelector('.close-btns');
    closeBbtn.addEventListener('click', function() {
        callMe.style.zIndex = '-999'
    })

    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            let step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            window.scroll(0, window.pageYOffset + step)
        }, 5);
    }
}